<template>
  <div id="app">
     <el-card shadow="always">
        <el-table
            :data="studentlist"
            style="width: 100%">
            <el-table-column
              label="学号"
              prop="sid"
              align="center"
              width="180"/>
            <el-table-column
              label="姓名"
              prop="sname"
              align="center"/>
            <el-table-column
              label="性别"
              prop="sex"
              align="center"/>
            <el-table-column
              label="年龄"
              prop="age"
              align="center"/>
            <el-table-column
              label="地址"
              prop="addr"
              align="center"/>
            <el-table-column
              label="班级"
              prop="cid"
              align="center"/>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
     </el-card>
  </div>
</template>

<script>
import studentApi from "@/api/student"

    export default {
      data() {
        return {
          studentlist: []
        }
      },
      created() {
        this.findStudents()
      },
      methods: {
        async findStudents() {
            const {data:res} = await studentApi.findAllStudents()
            if (res.code === 200) {
              this.studentlist = res.data.list
            }
        }
      }
    }
  </script>

<style>
    #app{
        display: flex;
        justify-content: center;
    }
    .el-card{
        width:90%;
    }
</style>
